<template>
  <h1>注册</h1>
  <hr/>
  
    <el-form
    :label-position="labelPosition"
    label-width="auto"
    :model="formLabelAlign"
    style="max-width: 600px"
  >

    
    <el-form-item label="nickname" :label-position="itemLabelPosition">
      <el-input v-model="user.nickName" />
    </el-form-item>
    
    <el-form-item label="loginName" :label-position="itemLabelPosition">
      <el-input v-model="user.loginName" />
    </el-form-item>
    
    <el-form-item label="Password" :label-position="itemLabelPosition">
      <el-input v-model="user.loginPwd" type="password" />
    </el-form-item>
     <el-form-item label="pic" :label-position="itemLabelPosition">
       <el-upload
        class="upload-demo"
   
        :on-change="handleFileChange"
        :auto-upload="false"
      >
        <el-button type="primary">点击上传</el-button>
      </el-upload> <!-- <input type="file" name="pic"/> -->
    </el-form-item>
    <el-form-item label="emaik" :label-position="itemLabelPosition">
      <el-input v-model="user.email" />
    </el-form-item>
  </el-form>
  <el-button type="success" @click="reg()">注册</el-button>
  

</template>

<script lang='ts' setup>
import axios from '@/axios/index.js'
import { reactive,ref } from 'vue'

import type { FormItemProps, FormProps } from 'element-plus'
import { useRouter } from 'vue-router'
 
const labelPosition = ref<FormProps['labelPosition']>('right')
const itemLabelPosition = ref<FormItemProps['labelPosition']>('')

const formLabelAlign = reactive({
  name: '',
  region: '',
  type: '',
})

const router = useRouter();
        async function reg (){
                   if (!user.pic) {
    console.warn('No file selected.')
    return
                   }
          const resp= await axios.post("http://localhost:82/my/ajax/reg",user,{
            withCredentials: true,
              headers:{
                'Content-Type':'multipart/form-data'
              }
            })
            
                    router.push('/login')
                
            
        }

  function handleFileChange(file: any, fileList: any[]) {

  user.pic = file.raw
  
}


       const  user=reactive({
                nickName:'',
                loginName:'',
                loginPwd:'',
                email:'123@qq.com',
                pic:null
            })
    
    

    // data(){
    //     return{
    //         user:{
    //             nickName:'',
    //             loginName:'',
    //             loginPwd:'',
    //             email:'zzzz'
    //         }
    //     }
    // },
    // methods:{
    //     reg:function(){
    //         axios.post("http://localhost:82/my/ajax/reg",this.user)
    //         .then(function(resp){
    //             // if(resp.data.state==200){
    //                 alert(resp.data.msg)
    //             // }
    //         })
    //     }
    // }

// }
</script>

<style>

</style>